<extend name="common" />
<block name="main">
<div class="bd api-detail">
    <form id="testApiForm" data-ajax="false" method="post" encType="multipart/form-data" class="form-horizontal" action="testApi" target="request_result">
    <input type="hidden" name="pid" value="{$project_id}">
    <input type="hidden" name="request_url" class="form-control" value="{$api_info.request_url}">
    <input type="hidden" name="api_method" class="form-control" value="{$api_info.api_method}">
    <div class="panel panel-info">
        <div class="panel-heading">{$api_info.api_name}/{$api_info.api_intro}</div>
        <table class="table">
            <thead>
                <tr>
                    <td>参数名称</td>
                    <td>参数值</td>
                    <td>参数类型</td>
                    <td>是否必填</td>
                    <td>参数说明</td>
                </tr>
            </thead>
            <tbody>
                <foreach name="api_info.param" item="param">
                <tr class="params-row">
                    <td class="w-150">{$param.param_name}</td>
                    <td class="col-lg-3">
                        <!-- 参数名称 -->
                        <!-- <input type="hidden" name="req[{$param.param_name}][name]" class="form-control" value="{$param.param_name}"> -->
                        <!-- 参数值 -->
                        <if condition="$param.param_type eq file">
                        <input type="file" name="{$param.param_name}" class="form-control">
                        <elseif condition="$param.param_type eq 'array'" />
                        <else />
                        <input type="text" name="req[{$param.param_name}][value]" class="form-control" value="{$param.param_default}">
                        </if>
                    </td>
                    <!-- 参数类型 -->
                    <td class="w-150">{$param['param_type']}<input type="hidden" name="req[{$param.param_name}][type]" class="form-control" value="{$param.param_type}"></td>
                    <td class="w-150"><if condition="$param['param_must'] eq 1">必填<else />可选</if>
                    <input type="hidden" name="req[{$param.param_name}][must]" class="form-control" value="{$param.param_must}">
                    </td>
                    <td>{$param.param_intro}</td>
                </tr>
                </foreach>
            </tbody>
        </table>
    </div>
    <div class="alert alert-info">PS:若使用签名算法，将会自动过滤参数中的sign字段</div>
    <div class="form-group">
        <div class="col-lg-2">
            <button type="submit" class="btn btn-success btn-submit col-lg-12" id="btn_submit"><i class="glyphicon glyphicon-send"></i>&nbsp&nbsp&nbsp执行API({$api_info.api_method})</button>
        </div>
        <div class="col-lg-2">
            <div class="checkbox">
                <label>
                <if condition="$usesign_checked eq 1">
                <input type="checkbox" name="use_sign" value="1" checked/>使用签名算法
                <else />
                <input type="checkbox" name="use_sign" value="1"/>使用签名算法
                </if>
                </label>
            </div>
        </div>
    </div>
    </form>
    <div class="panel panel-info">
        <div class="panel-heading clearfix result-hd">
            <h3 class="panel-title pull-left title">接口返回信息</h3>
            <div class="pull-left">
                <select class="form-control" id="result_format">
                    <option value="text">text</option>
                    <option value="json">json</option>
                    <!-- <option value="xml">xml</option> -->
                </select>
            </div>
        </div>
        <div class="panel-body">
            <iframe class="col-lg-12" id="request_result" name="request_result">
            </iframe>
            <input type="hidden" id="txt_result">
        </div>
    </div>
</div>
<style>
#request_result{
    height: 500px;
    border: none;
    padding: 0;
}
</style>
<script>
$(function(){
    $('#result_format').on('change',function(){
        var txt;
        if($('#txt_result').val() != ''){
            txt = $('#txt_result').val();
        }
        else{
            return false;
            // txt = request_result.window.document.getElementById("api_result").value;
        }
        if($(this).val() == 'json'){
            var json_format = format(txt);
            if(json_format.success){
                request_result.window.document.getElementById("api_result").innerHTML = '<pre class="show-json">'+json_format.content+'</pre>';
            }
            else{
                showMessage('error',json_format.msg);
            }
        }
        else if($(this).val() == 'text'){
            request_result.window.document.getElementById("api_result").innerHTML = $('#txt_result').val();
        }
    })
}) 
</script>
</block>